<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>作用域-let-const作用域提升</title>
  <!-- 
  在JavaScript中， `let`  和  `const`  是 ES6 引入的关键字，用于声明变量。它们在作用域和作用域提升（Hoisting）方面与传统的  `var`  有显著的区别。
  1. 作用域
   1.1 块级作用域
  -  `let`  和  `const`  都是块级作用域。这意味着它们的作用域仅限于它们被声明的代码块（即  `{}`  内部），而不是整个函数或全局作用域。
  {
      let x = 10;
      const y = 20;
      console.log(x); // 输出: 10
      console.log(y); // 输出: 20
  }

  console.log(x); // 报错: x is not defined
  console.log(y); // 报错: y is not defined
   1.2 函数作用域
  - 与  `var`  相比， `let`  和  `const`  的作用域更加严格。 `var`  声明的变量是函数作用域或全局作用域，而  `let`  和  `const`  仅在块级作用域内有效。
  function test() {
      if (true) {
          var a = 5; // 函数作用域
          let b = 10; // 块级作用域
      }
      console.log(a); // 输出: 5
      console.log(b); // 报错: b is not defined
  }

  test();
  2. 作用域提升
   2.1 变量提升
  - 使用  `var`  声明的变量会被提升到函数或全局作用域的顶部，尽管赋值不会提升。这意味着你可以在声明之前访问这些变量，但它们的值为  `undefined` 。
  console.log(a); // 输出: undefined
  var a = 5;
  console.log(a); // 输出: 5
   2.2 暂时性死区
  - 使用  `let`  和  `const`  声明的变量同样会被提升，但它们不会被初始化。因此，在声明之前访问这些变量会导致“暂时性死区”（Temporal Dead Zone），会抛出错误。
  console.log(b); // 报错: Cannot access 'b' before initialization
  let b = 10;
  console.log(b); // 输出: 10
  console.log(c); // 报错: Cannot access 'c' before initialization
  const c = 20;
  console.log(c); // 输出: 20
  3. 总结
  - 作用域： `let`  和  `const`  都具有块级作用域，限制了变量的访问范围，而  `var`  是函数作用域或全局作用域。
  - 变量提升： `var`  声明的变量会提升并初始化为  `undefined` ，而  `let`  和  `const`  声明的变量会提升但不会初始化，导致在声明前访问会报错。
  - 最佳实践：为了提高代码的可读性和可维护性，建议使用  `let`  和  `const`  来替代  `var` ，并合理利用块级作用域的特性。使用  `const`  声明不可变的变量，使用  `let`  声明可变的变量。
  -->
</head>
<body>

  <script>
    // 1. var存在变量提升，let和const不存在变量提升
    console.log(message);// undefined
    var message = "Hello World!"; 

    // 2. let和const不存在变量提升
    // console.log(message);// 报错
    let message = "Hello World!"; 
    // console.log(message);// 报错
    const message = "Hello World!";

  </script>
  
</body>
</html>